<template>
  <el-container direction="vertical">
    <div @click.stop="clic" class="cu row el-alert el-alert--info is-light" v-show="isphone">
      <div class="col">
        <el-icon :style="{ transform: 'translateY(-1px)' }">
          <warning-filled />
        </el-icon>
        {{ title }}
      </div>
      <div @click.stop="isphone = false" :style="{ width: '40px' }">
        <el-icon>
          <Close />
        </el-icon>
      </div>
    </div>

    <HeadNav ref="headnav" :changeTeam="changeTeam"
      :icon="myteam.icon ? myteam.icon : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/CloudClassroom/oj-default-logo.png'">
    </HeadNav>
    <router-view class="main" v-if="show" v-slot="{ Component, route }">
      <keep-alive :max="10" :include="['questionbankindex', 'questionindex', 'Home']">
        <component :is="Component" :changeTeam="changeTeam" />
      </keep-alive>
    </router-view>
  </el-container>
</template>

<script setup lang='ts'>
import { Close, WarningFilled } from '@element-plus/icons-vue';
import { useStorage, useStyleTag } from '@vueuse/core';
import { ElNotification } from "element-plus";
import { computed, onMounted, provide, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import HeadNav from "./headNav.vue";
import { SET_TEAM } from "./store/mutation-types";

const show = ref(false)
const store = useStore(Storekey)
const code = ref<{
  error: number;
  msg?: string;
  data?: Studycodemodel.Iuserquestioninfo[];
  run?: true;
}>()
const socket = computed(() => {
  return store.state.socket
})

const headnav = ref()

provide('headnav', headnav)

provide('headnavdialogVisible', () => {
  headnav.value.shoudialogVisible("登录");
  return true;
})

provide('runcode', () => {
  code.value = undefined
  return true;
})
provide('getcode', code)

const getuser = computed(() => {
  return store.state.user
})


const isphone = ref(false)
const title = ref('您还没有绑定手机号，无法收到通知信息，可点击绑定')
function clic() {
  console.log(headnav.value.shoudialogVisible('修改个人信息'))
}

const _myteam = localStorage.getItem('myTeam')

const myteam = useStorage<Studycodemodel.Iteam>('my-team', _myteam ? JSON.parse(_myteam) : { color: "-cheng" })

const mystyle = useStyleTag(`:root { --color-cheng: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'});--color-cheng2: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}2);--color-cheng3: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}3) }`)

watch(() => store.state.user, (v) => {
  if (v && !v.phonenum) {
    isphone.value = true
  }
})

onMounted(async () => {
  await store.dispatch('actiononline')
  await store.dispatch('actionarticle')
  await store.dispatch('actionlabel')
  show.value = true;
  if (socket.value) {
    store.dispatch('actiontime')
    const v = socket.value
    v.on("runcode", (data) => {
      code.value = data;
    });
    v.on('notification', (data) => {
      const { title, context, type
      } = data
      ElNotification({
        title,
        message: context,
        type,
      })
    })
  }
  router.beforeResolve((to, from, next) => {
    const { name } = to;
    if (name == "题目") {
      if (!getuser.value) {
        headnav.value.shoudialogVisible();
        next(false);
        return;
      }
    } else if (name == "用户") {
      if (!getuser.value) {
        headnav.value.shoudialogVisible();
        next(false);
        return;
      }
    }
    next();
  });
})

watch(() => getuser.value, (v) => {
  if (v) {
    store.dispatch('actionteam', { userid: v.ID }).then(e => {
      console.log("APP.vue watch getuser.value myteam", myteam.value)
      const team = store.state.team?.rows[0]
      // useStorage获取不到 默认第一个
      if (!myteam.value?.ID) {
        myteam.value = { ID: team?.ID, name: team?.name, color: team?.color, icon: team?.icon }
      }
      // 默认第一个 color都有默认值
      // const team = store.state.team?.rows.find(e => e.color)
      // myteam.value = { ID: team?.ID, name: team?.name, color: team?.color, icon: team?.icon }
      mystyle.css.value = `:root { --color-cheng: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'});--color-cheng2: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}2);--color-cheng3: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}3) }`
    })
  } else {
    store.commit(SET_TEAM, null);
  }
})

function changeTeam(team: Studycodemodel.Iteam) {
  myteam.value = { ID: team?.ID, name: team?.name, color: team?.color, icon: team?.icon }
  mystyle.css.value = `:root { --color-cheng: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'});--color-cheng2: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}2);--color-cheng3: var(--color-${myteam.value.color ? myteam.value.color : '-cheng'}3) }`
}


const router = useRouter()

defineExpose({
  title,
  isphone
})


</script>

<style scoped>
.main {
  margin-bottom: 25px;
}
</style>

<style>
html,
body,
#app {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

:root {
  --color--cheng2: #d96248;
  --color--cheng3: #b34532;
  --color--cheng: #ff8461;
}

#app {
  position: relative;
}

#app button:focus {
  outline: 0px !important;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

pre {
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  border: #ddd solid 1px;
  background: #f8f8f8;
  border-radius: 3px;
  overflow: auto;
  font-size: 0.875em;
  font-family: monospace;
  min-height: 30px;
}

a:hover {
  text-decoration: none;
}

.table tr td {
  font-size: 15px;
}

.text-00c8a5 {
  color: var(--color-cheng) !important;
}

.bg-00c8a5 {
  background-color: var(--color-cheng) !important;
  color: #fff;
}
</style>
